<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="享受折扣" prop="discountPercent" v-if="ruleForm.benefitsType === 1">
      <el-input-number
        style="width: 100%"
        v-model="ruleForm.discountPercent"
        :min="1"
        :max="100"
        :controls="false"
      />
    </el-form-item>
    <el-form-item label="积分倍率" prop="pointMultiplier" v-if="ruleForm.benefitsType === 2">
      <el-input-number
        style="width: 100%"
        v-model="ruleForm.pointMultiplier"
        :min="1"
        :max="100"
        :controls="false"
      />
    </el-form-item>

    <el-form-item label="关联会员等级" prop="levelList">
      <el-select v-model="ruleForm.levelId">
        <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="状态" prop="status" v-if="ruleForm.benefitsType !== 3">
      <el-select v-model="ruleForm.status">
        <el-option label="启用" :value="1" />
        <el-option label="禁用" :value="0" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getLevelList } from '@/api/member/level'

interface RuleForm {
  interestsId: number
  benefitsType: number
  discountPercent: number
  pointMultiplier: number
  levelId: undefined | number
  status: number
  // createTime: string
}

const emit = defineEmits(['success'])
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

watch(
  () => props.data,
  (newVal) => {
    console.log('newVal', newVal)
    nextTick(() => {
      ruleForm.benefitsType = newVal.benefitsType || 1
      ruleForm.discountPercent = newVal.benefitValue || 0
      ruleForm.pointMultiplier = newVal.benefitValue || 0
      ruleForm.levelId = newVal.levelId || undefined
      ruleForm.status = newVal.status || 1
      ruleForm.interestsId = newVal.interestsId || 0
      // ruleForm.createTime = newVal.createTime || ''
    })
  }
)

onMounted(() => {
  getLevelListData()
})

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  interestsId: props.data.interestsId || 0,
  benefitsType: props.data.benefitsType || 1,
  discountPercent: props.data.benefitValue || 1,
  pointMultiplier: props.data.benefitValue || 1,
  levelId: props.data.levelId || undefined,
  status: props.data.status || 1
  // createTime: props.data.createTime || ''
})

const rules = reactive<FormRules<RuleForm>>({
  discountPercent: [{ required: true, message: '请输入享受折扣', trigger: 'blur' }],
  pointMultiplier: [{ required: true, message: '请输入积分倍率', trigger: 'blur' }],
  levelId: [{ required: true, message: '请选择关联会员等级', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
})

const levelList = ref<any[]>([])
const getLevelListData = () => {
  return new Promise((resolve, reject) => {
    getLevelList({})
      .then((res) => {
        levelList.value = res
        resolve(res)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

const submitForm = () => {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      let sendData: any
      sendData = {
        interestsId: !ruleForm.interestsId ? undefined : ruleForm.interestsId,
        benefitsType: ruleForm.benefitsType,
        levelId: ruleForm.levelId,
        status: ruleForm.status,
        benefitsId: props.data.interestsId,
        id: props.data.id,
        level: levelList.value.find((item) => item.id === ruleForm.levelId)?.level,
        benefitValue:
          ruleForm.benefitsType === 1 ? ruleForm.discountPercent : ruleForm.pointMultiplier
      }

      emit('success', sendData)
    } else {
      console.log('error submit!', fields)
    }
  })
}

defineExpose({
  submitForm
})
</script>
